<template>
  <div>
    <section id="services" class="services service-section">
      <div class="container">
        <div class="section-header">
          <h2 class="wow fadeInDown animated">健身计划</h2>
          <p class="wow fadeInDown animated">坚持锻炼，铸就更好的自己</p>
        </div>
        <div class="row">
          <div class="col-md-4 col-sm-6 services text-center" v-for="(plain, index) in plainList" :key="index"
               @click="showPlain(plain, index)">
            <!--            <span class="icon icon-strategy"></span>-->
            <img :src="plain.course.courseImageUrl" alt=""
                 style="border-radius: 50%; width: 100px; margin-bottom: 20px">
            <div class="services-content">
              <h5>{{plain.plainNam}}</h5>
              <p>所属课程：{{plain.course.name}}</p>
              <p>创建日期：{{plain.createTime}}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 添加或修改新闻列表对话框 -->
    <el-dialog
      :title="title"
      v-if="open"
      :visible.sync="open"
      width="80%"
      height="60%"
      class="detail-dialog">
      <el-table
        :data=" choicePlain.plainDetails"
        style="width: 100%">
        <el-table-column
          prop="time"
          label="时间"
          width="300">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.business_weekday" :value="scope.row.time"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="context"
          label="内容"
          show-overflow-tooltip
          width="300">
        </el-table-column>
        <el-table-column
          label="打卡">
          <template slot-scope="scope">
            <el-button type="success" plain v-if="scope.row.hasSignIn" @click="signIn(scope.row)">签到</el-button>
            <el-button type="warning" plain v-if="scope.row.hasSignOut" @click="signOut(scope.row)">签退</el-button>
            <el-button type="primary" plain v-if="scope.row.alreadySign">完成签到</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
  import {
    listUserCourse,
    getUserCourse,
    addUserCourse,
    updateUserCourse,
    delUserCourse
  } from '@/business/api/user_course'
  import {listExercise, getExercise, addExercise, updateExercise, delExercise, signOut} from '@/business/api/exercise'
  import { queryMyselfPlain } from '@/business/api/plain'

  export default {
    name: 'index',
    dicts: ['business_weekday'],
    data: function() {
      return {
        plainList: [],
        title: '',
        open: false,
        choicePlain: null,
        form: {},
        exerciseForm: {
          plainId: null,
          userId: null,
          startTime: null,
          endTime: null,
          weekday: null
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getDatetime() {
        var d = new Date();
        var year = d.getFullYear();
        var month = change(d.getMonth() + 1);
        var day = change(d.getDate());
        var hour = change(d.getHours());
        var minute = change(d.getMinutes());
        var second = change(d.getSeconds());

        function change(t) {
          if (t < 10) {
            return "0" + t;
          } else {
            return t;
          }
        }

        var time = year + '-' + month + '-' + day + ' '
          + hour + ':' + minute + ':' + second;

        return time;
      },
      signIn(row) {
        this.exerciseForm.plainId = this.choicePlain.id;
        this.exerciseForm.weekday = row.time
        this.exerciseForm.startTime = this.getDatetime();
        addExercise(this.exerciseForm).then(response => {
          if (response.code === 200) {
            this.$message.success('签到成功')
            this.getList();
            this.open = false;
          }
        })
      },
      signOut(row) {
        this.exerciseForm.plainId = this.choicePlain.id;
        this.exerciseForm.weekday = row.time
        this.exerciseForm.startTime = this.getDatetime();
        signOut(this.exerciseForm).then(response => {
          if (response.code === 200) {
            this.$message.success('签退成功')
            this.getList();
            this.open = false;
          }
        })
      },
      handleClose() {

      },
      showPlain(plain, index) {
        this.choicePlain = plain
        this.title = plain.plainNam
        this.open = true
      },
      getList() {
        queryMyselfPlain().then(response => {
          if (response.code === 200) {
            this.plainList = response.data
          }
        })
      }
    }
  }
</script>

<style scoped src="../../../../assets/css/main.css">
  .detail-row {
    margin-bottom: 20px;
    text-align: center;
  }

  th {
    text-align: center;
    width: 30%;
    background: yellow;
    font-weight: bolder;
    font-size: medium;
    font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  }

</style>
